﻿<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>BlazorApp1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
</head>

<body>
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.webassembly.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script>
        google.charts.load('current', { packages: ['corechart', 'line'] });
        google.charts.setOnLoadCallback(initChart);

        function initChart() {
            var xs = [];
            var ys = [];
            window.createNewChart({xs, ys});
        }

        window.createNewChart = (params) => {
            var xs = params.xs;
            var ys = params.ys;

            var data = new google.visualization.DataTable();
            data.addColumn('number', 'X');
            data.addColumn('number', 'Y');

            for (var i = 0; i < ys.length; i++) {
                data.addRow([xs[i], ys[i]]);
            }

            var options = {
                hAxis: { title: 'Horizontal Axis Label' },
                vAxis: { title: 'Vertical Axis Label' },
                title: 'This is a Google Chart in Blazor',
                legend: { position: 'none' },
            };

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

            chart.draw(data, options);
        };

    </script>

</body>

</html>
